<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-08-09 16:21:21
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-10-15 20:54:39
 * @FilePath: /BLOG/src/views/search/index.vue
-->
<template>
  <div class="search-wrap">
    <PageTopCover
      style="height: 100vh !important"
      :moduleTitle="''"
      :icon="''"
      :textIcon="''"
      :coverImg="getOnlineImgUrl('292')"
      :isMobile="false"
      :modulDesc="''"
      :isArticle="false"></PageTopCover>
    <div class="input-wrap" :class="{ 'm-input-wrap': isMobi }">
      <input class="input text" :value="state.keyword" type="text" placeholder="请输入" @keydown="e => handleKeyDown(e)" @input="e => (state.keyword = e.target.value)" />
      <div class="other-wrap pointer">
        <i class="iconfont icon-sousuo1" @click="handleSearch()"></i>
      </div>
    </div>
    <div class="search-container-wrap" :class="{ 'm-search-container-wrap': isMobi }">
      <div class="search-content-wrap">
        <div class="serch-content" :style="{ padding: '20px 20px 6px 20px' }">
          <div class="search-inner">
            <el-tabs v-model="state.activeName">
              <el-tab-pane :name="item.name" :key="item.name" v-for="item in state.tabs">
                <template #label>
                  <div class="custom-tabs-label">
                    <span class="tabs-label-title">{{ item.title }}</span>
                    <div class="len num-f">{{ state[item.name + 'List'].length }}</div>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
            <div class="serch-content-t">
              <div class="have-content-wrap">
                <div class="content-wrap">
                  <!-- 文章 -->
                  <div class="article-wrap" v-if="state.activeName == 'article' && state.articleList.length">
                    <div class="article-list search-item-inner">
                      <div
                        class="article-item kbn-read intersection-observer hover-shadow"
                        :data-tip="item.title.length > 16 ? item.title.slice(0, 16) + '...' : item.title"
                        v-for="(item, index) in state.articleList"
                        :key="index">
                        <div class="img-left item-wrap">
                          <div class="item-content">
                            <div
                              class="article-item-bg"
                              :style="{ backgroundImage: 'repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, transparent 10px, transparent 20px,' + item.color + ')' }"></div>
                            <div class="create-time">
                              <i class="iconfont icon-shijian"></i>
                              <span>发布于：</span>
                              <span>{{ item.createTime }}</span>
                              <div class="type">{{ state.articleTypeList.find(v => v.value == item.type)?.label || '未知类型' }}</div>
                            </div>
                            <div class="article-title pointer" @click="handleArticle(item)" v-html="highlightText(item.title)"></div>
                            <div class="auth-info-wrap user-select-none">
                              <div>
                                <img :src="state.avatar" vertical-align="middle" alt="" />
                                <span>snows_l</span>
                              </div>
                              <div>
                                <IconHot class="iconfont"></IconHot>
                                <span>{{ item.readCount || 0 }}</span>
                              </div>
                              <div>
                                <IconLike :size="18" class="iconfont" />
                                <span>{{ item.shareCount || 0 }}</span>
                              </div>
                              <div>
                                <IconComment :size="19" class="iconfont"></IconComment>
                                <span>{{ item.commentCount || 0 }}</span>
                              </div>
                              <div class="pointer" data-tip="点击 可直接阅览" v-if="item.isPreview === 1" @click="handleView(item)">
                                <IconPreview class="iconfont" :size="18"></IconPreview>
                                <span class="" style="font-size: 12px">预览</span>
                              </div>
                            </div>
                            <div class="article-des text" v-html="highlightText(item.subTitle)"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 音乐 -->
                  <div class="search-item music-wrap" v-if="state.activeName == 'music' && state.musicList.length">
                    <div class="music-list search-item-inner">
                      <div
                        @click="handlePlay(item)"
                        class="music-item pointer kbn-music intersection-observer hover-shadow"
                        :data-tip="item.title"
                        v-for="(item, index) in state.musicList"
                        :key="index">
                        <div class="music-item-wrap">
                          <div class="music-item-bg" :style="{ backgroundImage: 'url(' + item.img + ')' }"></div>
                          <div class="cover-wrap" @click="e => e.stopPropagation()">
                            <LImg style="transition: all 0.4s ease-in-out" class="cover-img" :src="item.img" alt="" />
                          </div>
                          <div class="music-info">
                            <div class="info-item text music-title" v-html="highlightText(item.title)"></div>
                            <div class="info-item text music-artist" style="margin-bottom: 6px">
                              歌手：
                              <span v-html="highlightText(item.artist)"></span>
                            </div>
                            <div class="info-item text music-type">类型：{{ state.playList.find(row => row.value == item.type)?.label }}</div>
                          </div>
                        </div>
                        <div class="is-playing-current">
                          <span class="current-music" v-show="state.currentMusicId == item.id">☑️</span>
                          <img v-show="state.isPlaying && state.currentMusicId == item.id" :src="getOnlineImgUrl('playing', '/imgs/common', 'gif')" alt="" />
                          <div
                            v-loading="item.loading"
                            :style="{ display: isMobi || item.loading ? 'block' : 'none', marginLeft: '10px' }"
                            class="download-btn"
                            @click="
                              e => {
                                e.stopPropagation();
                                hendleDownload(item, index);
                              }
                            ">
                            下载
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 视频 -->
                  <div class="search-item video-wrap" v-if="state.activeName == 'video' && state.videoList.length">
                    <div class="video-list search-item-inner" v-if="state.videoList.length > 0">
                      <div
                        class="video-item pointer intersection-observer kbn-custom hover-shadow"
                        :data-tip="'想看看 「' + item.title + '」 吗？'"
                        @click="handlevideo(item)"
                        v-for="item in state.videoList">
                        <div class="video-ifarme-wrap">
                          <LImg class="video-img" :src="item.cover.includes('http') ? item.cover : getCoverImg(item.cover)" :isUnPreview="true" />
                          <i class="iconfont icon-bofang"></i>
                        </div>
                        <div class="video-item-title text" v-html="highlightText(item.title)"></div>
                      </div>
                    </div>
                  </div>

                  <!-- 游戏 -->
                  <div class="search-item game-wrap" v-if="state.activeName == 'game' && state.gameList.length">
                    <div class="game-list search-item-inner">
                      <div
                        class="game-item pointer intersection-observer kbn-custom hover-shadow"
                        :data-tip="'想玩玩 「' + item.title + '」 吗？'"
                        @click="handleGame(item)"
                        v-for="(item, index) in state.gameList"
                        :style="{ margin: index % 3 == 1 ? '10px 36px' : '10px 0 ' }"
                        :key="index">
                        <div class="game-item-img">
                          <LImg class="game-img" :src="item.cover" :isUnPreview="true" alt="" />
                        </div>
                        <div class="game-item-title text" v-html="highlightText(item.title)"></div>
                      </div>
                    </div>
                  </div>

                  <!-- 友链 -->
                  <div class="search-item friend-warp" v-if="state.activeName == 'friend' && state.friendList.length">
                    <div class="friend-list search-item-inner">
                      <div
                        class="friend-item pointer intersection-observer hover-shadow kbn-custom"
                        :data-tip="`想要前往 「${item.name}」 的小站吗？`"
                        @click="handleTo(item)"
                        v-for="(item, index) in state.friendList"
                        :style="{ margin: index % 3 == 1 ? '10px 27px' : '10px 0 ' }"
                        :key="index">
                        <div class="friend-item-bg" :style="{ backgroundImage: 'url(' + item.logo + ')' }"></div>
                        <div class="friend-item-img">
                          <img :src="item.logo" alt="" />
                          <div class="status online"></div>
                        </div>
                        <div class="friend-info-wrap">
                          <div class="friend-item-title" v-html="highlightText(item.name)"></div>
                          <div class="friend-item-content" v-html="highlightText(item.profile)"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="empry-wrap" v-if="isShowEmpty()">
                <Empty :text="'没有找到相关内容~请重新搜索！'" :loadingText="'搜索内容加载中...'" :loading="state.loading" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getRandomColor } from '@/utils/theme';
import { live2dReloadElement } from '@/utils/live2d';
import { getArticleList } from '@/api/article';
import { getZoneList } from '@/api/zone';
import { getDict } from '@/api/common';
import { getMusicList } from '@/api/music';
import { getFriendLindList } from '@/api/friend';
import $bus from '@/bus/index';
import useResize from '@/hooks/useResize';
import { useAppStore } from '@/store/app';
import { getOnlineImgUrl, getQQAvatar, CustomMessage } from '@/utils/common';
import moment from 'moment';
import { onMounted, onUnmounted, onUpdated, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
const { isMobi } = useResize();
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import { ElTabs, ElTabPane } from 'element-plus';
useIntersectionObserver();

const store = useAppStore();
const router = useRouter();

const props = defineProps({
  show: {
    type: Boolean
  }
});

const state = reactive({
  activeName: 'article',
  tabs: [
    { name: 'article', title: '文章' },
    { name: 'music', title: '音乐' },
    { name: 'video', title: '视频' },
    { name: 'game', title: '游戏' },
    { name: 'friend', title: '友联' }
  ],
  musicList: [],
  videoList: [],
  gameList: [],
  articleList: [],
  playList: [],
  friendList: [],
  articleTypeList: [],
  keyword: '',
  preKeyword: '',
  avatar: getQQAvatar(),
  loading: false,
  currentMusicId: 0,
  isPlaying: localStorage.getItem('isPlaying') == 'true' ? true : false
});

const page = {
  page: 1,
  size: 1000
};

const handleKeyDown = (e: any) => {
  if (e.keyCode === 13) {
    handleSearch();
  }
};

// 搜索
const handleSearch = () => {
  try {
    if (!state.keyword.trim()) {
      CustomMessage({ type: 'warning', message: '请输入搜索「关键字」！' });
      return false;
    } else {
      if (state.keyword == state.preKeyword) {
        CustomMessage({ type: 'warning', message: '请换一个「关键字」搜索！' });
        return false;
      }
    }
    handleScrollToBottom();
    state.preKeyword = state.keyword;
    let serverUrl = store.projectConfig.bsServerUrl;
    state.loading = true;
    state.musicList = [];
    state.articleList = [];
    page.page = 1;
    Promise.all([
      getMusicList({ title: state.keyword, ...page }),
      getZoneList({ text: state.keyword, ...page, type: 1 }),
      getArticleList({ title: state.keyword, ...page }),
      getFriendLindList({ name: state.keyword, isPage: false })
    ])
      .then(res => {
        // 处理音乐类型
        state.musicList = res[0].data.map(item => {
          return {
            ...item,
            src: import.meta.env.VITE_CURRENT_ENV == 'dev' ? import.meta.env.VITE_DEV_BASE_SERVER + item.src : serverUrl + item.src,
            img: import.meta.env.VITE_CURRENT_ENV == 'dev' ? import.meta.env.VITE_DEV_BASE_SERVER + item.cover : serverUrl + item.cover,
            loading: false
          };
        });

        // 处理视频类型
        state.videoList = res[1].data.map(item => {
          let imgs = (item.imgs && item.imgs.split(',')) || [];
          return {
            ...item,
            bvid: item.remark,
            cover: import.meta.env.VITE_CURRENT_ENV == 'dev' ? import.meta.env.VITE_DEV_BASE_SERVER + imgs[0] : serverUrl + imgs[0],
            title: item.text
          };
        });

        // 处理文章类型
        state.articleList = res[2].data.map(item => {
          return {
            ...item,
            cover: import.meta.env.VITE_CURRENT_ENV == 'dev' ? import.meta.env.VITE_DEV_BASE_SERVER + item.cover : serverUrl + item.cover,
            subTitle: item.subTitle.replace(/&#39;/g, "'"),
            createTime: moment(item.createTime).format('YYYY-MM-DD'),
            color: getRandomColor()
          };
        });

        // 处理游戏类型
        state.gameList = state.articleList.filter(item => item.game == 1 && item.title.includes(state.keyword));

        // 处理友联
        res[3].data.forEach(item => {
          item.logo = item.isQQ == 1 ? getQQAvatar(item.logo) : item.logo;
        });
        state.friendList = res[3].data;
        state.loading = false;
      })
      .catch(() => {
        state.loading = false;
      })
      .finally(() => {
        state.loading = false;
      });
  } catch (error) {}
};

// 滚动到底部留言并且然输入框聚焦
const handleScrollToBottom = () => {
  nextTick(() => {
    let top = 0;
    const layoutEle: Element = document.querySelector('#layout') as Element;
    const searchContainerEle: Element = document.querySelector('.search-container-wrap') as Element;
    if (searchContainerEle) {
      top = (searchContainerEle as Element).offsetTop - 70;
      layoutEle.scrollTo({ top, behavior: 'smooth' });
    }
  });
};

const highlightText = (text: string) => {
  if (!state.keyword || state.keyword.trim() == '') return text;
  const regex = new RegExp(state.keyword, 'g');
  return text.replace(regex, `<span class="highlight">${state.keyword}</span>`);
};

// 获取音乐类型
const getPlayList = () => {
  getDict({ dictType: 'music_type' }).then(res => {
    state.playList = res.data;
    store.SET_MUSIC_DICT(res.data);
  });
};

// 获取文章类型
const getArticleTypeList = () => {
  getDict({ dictType: 'article_type' }).then(res => {
    state.articleTypeList = res.data;
    store.SET_ARTICLE_DICT(res.data);
  });
};

// 播放音乐
const handlePlay = (item: any) => {
  state.currentMusicId = item.id;
  $bus.emit('playMusic', { id: item.id });
};

// 下载音乐
const hendleDownload = (item: any, index: number) => {
  state.musicList[index].loading = true;
  const x = new XMLHttpRequest();
  x.open('GET', item.src, true);
  x.responseType = 'blob';
  x.onload = function () {
    const url = window.URL.createObjectURL(x.response);
    const elink = document.createElement('a');
    elink.href = url;
    elink.target = '_self'; // 当前也 target打开新页面
    elink.setAttribute('download', item.title + ' - ' + item.artist + '.mp3');
    elink.style.display = 'none';
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
    state.musicList[index].loading = false;
  };
  x.send();
};

const handleView = (row: any) => {
  router.push({
    path: '/preview',
    query: {
      id: row.id
    }
  });
};

// 点击视频播放
const handlevideo = (row: any) => {
  // let urlPrefix = store.projectConfig.blogUrl;
  const urlPrefix = window.location.protocol + '//' + window.location.host;
  window.open(urlPrefix + '/play/mp4/playing?bvid=' + row.bvid, '_blank');
};

// 点击文章详情
const handleArticle = (row: any) => {
  router.push({
    path: '/article/detail',
    query: {
      id: row.id
    }
  });
};

// 点击小游戏跳转到预览页
const handleGame = (row: any) => {
  let urlPrefix = store.projectConfig.blogUrl;
  window.open(urlPrefix + '/preview?id=' + row.id, '_blank');
};

// 跳转到友链
const handleTo = item => {
  window.open(item.url, '_blank');
};

// 获取音乐类型和文章类型
store.musicDict.length > 0 ? (state.playList = store.musicDict) : getPlayList();
store.articleDict.length > 0 ? (state.articleTypeList = store.articleDict) : getArticleTypeList();
state.loading = false;
state.isPlaying = localStorage.getItem('isPlaying') == 'true' ? true : false;

const isShowEmpty = () => {
  let show = false;
  if (
    state.loading ||
    (state.activeName == 'article' && state.articleList.length == 0) ||
    (state.activeName == 'video' && state.videoList.length == 0) ||
    (state.activeName == 'game' && state.gameList.length == 0) ||
    (state.activeName == 'friend' && state.friendList.length == 0) ||
    (state.activeName == 'music' && state.musicList.length == 0)
  ) {
    show = true;
  }
  return show;
};

onMounted(() => {
  // 监听 播放器 播放状态变化
  $bus.on('musicPlayerStatusChange', (n: boolean) => {
    state.isPlaying = n;
  });
  // 监听 播放器 当前音乐变化
  $bus.on('musicPlayerCurrentMusicChange', (id: number) => {
    state.currentMusicId = id;
  });

  // if (!isMobi.value) {
  //   setTimeout(() => {
  //     document.querySelector('.search-wrap input')?.focus();
  //   }, 100);
  // }
});

onUpdated(() => {
  live2dReloadElement();
});

onUnmounted(() => {
  $bus.off('musicPlayerStatusChange');
  $bus.off('musicPlayerCurrentMusicChange');
});
</script>

<style lang="scss" scoped>
.search-wrap {
  .input-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--content-max-width) - 220px);
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: 450px;
    padding: 5px 20px 5px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.895);
    color: #aaa;
    &:focus-within {
      border-color: var(--theme-color);
    }
    &:hover {
      border-color: var(--theme-color);
    }
    .input {
      height: 100%;
      width: calc(100% - 24px);
      outline: none;
      border: none;
      font-size: 18px;
      background-color: transparent;
      color: var(--text-color);
      font-family: '喵喵体';
    }
    .other-wrap {
      width: 24px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      i {
        margin-top: 4px;
        font-size: 24px;
        color: var(--text-color-2);
      }
    }
    .left-info {
      width: 20px;
      height: 100%;
      background-color: transparent;
    }
  }
  .num {
    color: var(--theme-color);
    font-weight: 500;
    font-family: 'DSDIGI';
    font-size: 16px;
  }
  .search-container-wrap {
    .search-content-wrap {
      max-width: var(--content-max-width);
      margin: 0 auto;

      .serch-content {
        margin: 30px auto;
        width: 100%;
        border-radius: var(--border-radius-2);
        background: var(--bg-content-color);
        padding: 20px;
        .search-inner {
          width: 100%;
          height: 100%;
        }
        .serch-content-t {
          width: 100%;
          height: 100%;
          .empry-wrap {
            width: 100%;
            height: 100%;
          }
          .have-content-wrap {
            .music-title {
              height: 30px;
              line-height: 30px;
              font-size: 16px;
              color: var(--text-color);
            }
            .music-wrap {
              .music-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 5px 5px;
                .music-item {
                  width: 390px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 10px 20px;
                  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
                  border: 1px solid #fff;
                  margin: 10px 0;
                  border-radius: var(--border-radius-2);
                  background-color: var(--bg-content-color);
                  position: relative;
                  overflow: hidden;
                  &:hover {
                    .download-btn {
                      display: block !important;
                    }
                    .cover-img {
                      transform: scale(1.1);
                    }
                  }
                  .music-item-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    background-size: 1000% 1000%;
                    background-position: center;
                    filter: blur(80px);
                  }
                  .music-item-wrap {
                    display: flex;
                    align-items: center;
                  }
                  .is-playing-current {
                    top: 0;
                    right: 20px;

                    display: flex;
                    align-items: center;
                    .current-music {
                      font-size: 18px;
                      margin: 0 10px;
                    }
                    img {
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                    }
                  }
                  .cover-wrap {
                    width: 74px;
                    height: 74px;
                    padding: 3px;
                    .cover-img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .music-info {
                    margin-left: 20px;
                    color: var(--text-color);
                    .music-artist,
                    .music-type {
                      font-size: 12px;
                    }
                    .music-title {
                      margin-bottom: 12px;
                    }
                  }
                }
              }
              .m-no-music {
                height: 160px;
              }
            }
            .video-list {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              .video-item {
                border-radius: var(--border-radius-2);
                width: 266px;
                height: 200px;
                background-color: #fff;
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
                border: 1px solid #fff;
                margin: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                overflow: hidden;
                &:hover {
                  .video-img {
                    transform: scale(1.1);
                  }
                }
                .video-img {
                  transition: all 0.6s ease-in-out;
                }
                .video-ifarme-wrap {
                  width: 100%;
                  height: calc(100% - 30px);
                  overflow: hidden;
                  transition: all 1.2s ease-in-out;
                  position: relative;
                  .iconfont {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: #fff;
                    font-size: 50px;
                    opacity: 0;
                    transition: all 0.3s ease-in-out;
                  }
                  &:hover {
                    .iconfont {
                      opacity: 1;
                    }
                  }
                }
                .video-item-title {
                  width: 100%;
                  font-size: 16px;
                  font-weight: bold;
                  text-align: center;
                  color: var(--text-color);
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1; /* 定义文本的行数 */
                  overflow: hidden;
                  text-overflow: ellipsis;
                  height: 30px;
                  line-height: 30px;
                  background-color: var(--bg-content-color);
                  transition: bottom 0.3s ease-in-out;
                }
              }
            }

            .game-list {
              display: flex;
              flex-wrap: wrap;
              .game-item {
                border-radius: var(--border-radius-2);
                width: 266px;
                height: 200px;
                background-color: var(--bg-content-color);
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
                border: 1px solid #fff;
                margin: 10px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                overflow: hidden;
                &:hover {
                  .game-img {
                    transform: scale(1.1);
                  }
                }
                .game-item-img {
                  width: 220px;
                  height: 220px;
                  width: 100%;
                  height: 100%;
                  overflow: hidden;
                  transition: all 0.6s ease-in-out;
                  .game-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                    transition: all 0.6s ease-in-out;
                  }
                }
                .game-item-title {
                  width: 100%;
                  font-size: 18px;
                  text-align: center;
                  color: var(--text-color);
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1; /* 定义文本的行数 */
                  overflow: hidden;
                  text-overflow: ellipsis;
                  position: absolute;
                  bottom: 0px;
                  left: 0;
                  height: 30px;
                  line-height: 30px;
                  background-color: var(--bg-content-color);
                }
              }
            }
            .article-wrap {
              .article-list {
                padding: 5px 5px;
                max-width: var(--content-max-width);
                margin: 0 auto;
                margin-top: 10px;
                .article-item {
                  margin: 20px 0;
                  border-radius: var(--border-radius-2);
                  width: 100%;
                  height: 100%;
                  overflow: hidden;
                  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
                  border: 1px solid #fff;

                  &:hover {
                    .cover-img {
                      transform: scale(1.2);
                    }
                  }
                  &:first-child {
                    margin-top: 0;
                  }

                  .cover-img-wrap {
                    width: 450px;
                    height: 280px;
                    overflow: hidden;
                    .cover-img {
                      width: 100%;
                      height: 100%;
                      transition: all 0.8s ease-in-out;
                    }
                  }
                  .item-content {
                    flex: 1;
                    height: 100%;
                    padding: 20px;
                    // background-color: var(--bg-content-color);
                    position: relative;
                    overflow: hidden;
                    .article-item-bg {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      z-index: -1;
                      background-size: 1000% 1000%;
                      background-position: center;
                      filter: blur(200px);
                    }

                    .create-time {
                      display: inline-block;
                      height: 20px;
                      font-size: 12px;
                      padding: 4px 8px;
                      // background-color: var(--theme-light-color-9);
                      border-radius: 5px;
                      color: var(--text-color-2);
                      .iconfont {
                        font-size: 12px;
                        margin-right: 10px;
                      }
                      .type {
                        border: 1px solid var(--theme-light-color-9);
                        border-radius: 5px;
                        padding: 2px 4px;
                        font-size: 12px;
                        position: absolute;
                        top: 20px;
                        right: 20px;
                      }
                    }
                    .article-title {
                      margin-top: 20px;
                      height: 60px;
                      font-size: 20px;
                      line-height: 30px;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      text-align: left;
                      color: var(--text-color);
                    }
                    .article-title:hover {
                      color: var(--theme-color);
                    }
                    .auth-info-wrap {
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      div {
                        display: flex;
                        align-items: center;
                        .iconfont {
                          margin-right: 10px;
                          font-size: 20px;
                          color: var(--theme-color);
                        }
                        .icon-yanjing {
                          font-size: 24px;
                        }
                        span {
                          font-size: 12px;
                          color: var(--text-color);
                        }
                      }
                      img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-right: 10px;
                      }
                    }
                    .article-des {
                      height: 86px;
                      line-height: 21px;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 4;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      color: var(--text-color-2);
                    }
                  }
                }
              }
              .m-no-article {
                height: 160px;
              }

              .item-wrap {
                display: flex;
                flex-direction: column;
                height: auto !important;
                .cover-img-wrap {
                  width: 100% !important;
                  height: 180px !important;
                }

                .item-content {
                  .article-title {
                    margin-top: 10px !important;
                    height: 40px !important;
                    line-height: 20px !important;
                    font-size: 16px !important;
                  }
                }
                .auth-info-wrap {
                  height: 30px !important;
                  img {
                    width: 20px !important;
                    height: 20px !important;
                  }
                }
                .article-des {
                  height: 30px !important;
                  line-height: 15px !important;
                  font-size: 12px !important;
                  -webkit-line-clamp: 2 !important;
                }
              }
            }

            .friend-list {
              display: flex;
              flex-wrap: wrap;
              .friend-item {
                border-radius: var(--border-radius-2);
                width: 272px;
                padding: 20px 10px;
                background-color: var(--bg-content-color);
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
                border: 1px solid #fff;
                margin: 10px 0px;
                display: flex;
                align-items: center;
                position: relative;
                overflow: hidden;
                &:hover {
                  .friend-item-img {
                    transform: scale(1.1);
                  }
                }
                .friend-item-bg {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  z-index: -1;
                  background-size: 1000% 1000%;
                  background-position: center;
                  filter: blur(80px);
                }
                .friend-item-img {
                  width: 60px;
                  height: 60px;
                  transition: all 0.5s ease-in-out;
                  position: relative;
                  img {
                    border-radius: 5px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                  .status {
                    position: absolute;
                    top: -0px;
                    right: -0px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: #00b050;
                    transition: all 0.5s ease-in-out;
                    border: 2px solid #dcf2f8;
                  }
                  .online {
                    background-color: #00b050;
                  }
                  .offline {
                    background-color: #ccc;
                  }
                }
                .friend-info-wrap {
                  flex: 1;
                  margin-left: 20px;
                  .friend-item-title {
                    font-size: 16px;
                    font-weight: bold;
                    // text-align: center;
                    color: var(--text-color);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1; /* 定义文本的行数 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .friend-item-content {
                    font-size: 12px;
                    line-height: 18px;
                    font-weight: bold;
                    margin-top: 10px;
                    // text-align: center;
                    color: var(--text-color);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2; /* 定义文本的行数 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
            }

            .search-item {
              // padding-top: 20px;
              // margin-top: 20px;
              // border-top: 2px dashed var(--border-color);
            }
            .search-item-inner {
              padding: 5px;
            }
          }
        }
      }
    }
  }
}

.m-search-container-wrap {
  .search-content-wrap {
    width: var(--content-max-width-m) !important;
  }
  .music-list {
    padding: 0 !important;
  }
  .video-list {
    padding: 0 !important;
    .video-item {
      margin: 10px 0 !important;
      width: 100% !important;
      height: 46vw !important;
    }
  }

  .game-list {
    padding: 0 !important;
    .game-item {
      width: 100% !important;
      margin: 10px 0 !important;
      height: 46vw !important;
    }
  }
  .article-list {
    padding: 0 !important;
    margin-bottom: 20px !important;
  }

  .friend-list {
    justify-content: space-between !important;
    .friend-item {
      width: 100% !important;
      margin: 10px 2px !important;
    }
  }
}

.m-input-wrap {
  width: var(--content-max-width-m) !important;
}

.custom-tabs-label {
  display: flex;
  align-items: flex-start;
  .tabs-label-title {
    width: 40px;
    font-size: 16px;
  }
  .len {
    font-size: 12px;
  }
}
</style>

<style>
.highlight {
  margin: 0 4px;
  font-weight: 600;
  color: var(--theme-color) !important;
}
</style>
